<template>
  <div>
    <header class="header">
      <div class="top">
        <div class="navbar-list-navbar-left">
          <a href="/">
            <img src="../../../../assets/logo/logo.png" alt="" />
          </a>
        </div>
        <div class="container">
          <ul class="uld">
            <li
              v-for="(nav, index) in menus"
              :key="index"
              class="menus"
              @mouseover="mouse(index)"
            >
              <a
                :href="nav.url"
                :class="
                  $route.meta.biaoshi === nav.name ? 'menus-a2' : 'menus-a'
                "
              >
                {{ nav.name }}
              </a>
              <ul class="nav-list-menu" v-if="dada == index">
                <li
                  v-for="(subMenu, index) in nav.subMenus"
                  :key="index"
                  class="subMenu"
                >
                  <a :href="subMenu.url" class="a_href">
                    <span>{{ subMenu.name }}</span>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="navbar-list-navbar-right">
          <a href="">400-000-000</a>
          <a class="sosuo">
            <img src="../../../../assets/icon/icon_Search.png" alt="" />
          </a>
        </div>
      </div>
    </header>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dada: false,
      // Dropdownbox:false,
      menus: [
        {
          name: "首页",
          url: "/",
        },
        {
          name: "关于槿椿",
          url: "/brandintroduction?type=1",
          subMenus: [
            { name: "品牌介绍", url: "/brandintroduction?type=1" },
            { name: "文化理念", url: "/brandintroduction?type=2" },
            { name: "发展历程", url: "/brandintroduction?type=3" },
            { name: "企业荣誉", url: "/brandintroduction?type=4" },
            { name: "合作伙伴", url: "/brandintroduction?type=5" },
          ],
        },
        {
          name: "产业布局",
          url: "/rndustrialLayout?type=1",
          subMenus: [
            { name: "槿椿颐养中心", url: "/rndustrialLayout?type=1" },
            { name: "槿椿·泺园", url: "/rndustrialLayout?type=2" },
          ],
        },
        {
          name: "槿椿特色",
          url: "/hibiscusAltissima?type=1",
          subMenus: [
            { name: "医养体系", url: "/hibiscusAltissima?type=1" },
            { name: "智养体系", url: "/hibiscusAltissima?type=2" },
            { name: "康养体系", url: "/hibiscusAltissima?type=3" },
            { name: "教养体系", url: "/hibiscusAltissima?type=4" },
            { name: "旅养体系", url: "/hibiscusAltissima?type=5" },
            { name: "乐养体系", url: "/hibiscusAltissima?type=6" },
          ],
        },
        {
          name: "槿椿资讯",
          url: "/jinchun?type=1",
          subMenus: [
            { name: "最新资讯", url: "/jinchun?type=1" },
            { name: "行业动态", url: "/jinchun?type=2" },
            { name: "视频槿椿", url: "/jinchun?type=3" },
            { name: "长者风采", url: "/jinchun?type=4" },
          ],
        },
        {
          name: "联系我们",
          url: "/contactUstab?type=1",
          subMenus: [
            { name: "入住体验", url: "/contactUstab?type=1" },
            { name: "志愿服务", url: "/contactUstab?type=2" },
            { name: "合作招商", url: "/contactUstab?type=3" },
            { name: "参观学习", url: "/contactUstab?type=4" },
          ],
        },
      ],
    };
  },
  methods: {
    mouse(i) {
      this.dada = i;
    },
  },
};
</script>
<style scoped>
header {
  height: 9.6rem;
}
.nav-list-menu {
  display: block;
  width: 20.8rem;
  text-align: center;
  z-index: 99999;
  margin-top: 3.8rem;
  background-color: #fff;
  position: absolute;
  left: 0;
}
.a_href {
  margin-right: 3.2rem;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  /* color: rgba(0, 0, 0, 0.85); */
}
.subMenu:hover {
  background: #299399;
  font-size: 2rem;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}
.subMenu:hover span {
  background: #299399;
  font-size: 2rem;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}
/* .nav-list-menu li a:hover {
  color: rgba(255, 255, 255, 0.85);
} */
.subMenu {
  padding: 0px !important;
  width: 20.8rem;
  height: 4.8rem;
  line-height: 4.8rem;
  /* margin: 0 !important; */
  margin-top: 1.6rem;
}
.subMenu:last-child {
  margin-bottom: 1.6rem;
}
.subMenu span {
  font-size: 2rem;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.top {
  display: flex;
  justify-content: space-between;
  height: 9.5rem;
  margin: 0rem 3.2rem 0rem 3.2rem;
}
.top .container .uld {
  display: flex;
  text-align: center;
}
.top .container .uld li {
  padding: 3.2rem 5.2rem 3.2rem 5.2rem;
  font-size: 2rem;
  position: relative;
}
/* .top .container .uld li a:hover {
  color: #299399;
  text-decoration: none;
} */
.navbar-list-navbar-left img {
  width: 100%;
  height: 100%;
}
.navbar-list-navbar-right {
  line-height: 7.5rem;
  /* margin-right: 2rem; */
  display: flex;
  width: 27rem;
  align-items: center;
  justify-content: space-between;
}
.navbar-list-navbar-right a:nth-child(1) {
  color: #299399;
  font-size: 2.2rem;
  text-decoration: none;
  font-weight: bold;
}
.sosuo {
  width: 5.6rem;
  height: 4rem;
  background: rgba(41, 147, 153, 0.16);
  border-radius: 20px 20px 20px 20px;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sosuo img {
  width: 2.4rem;
  height: 2.4rem;
}
.menus-a {
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
}
.menus-a2 {
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #299399;
}
.menus-a:hover {
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #299399;
}
</style>